在component那一章有提到列表的部分，其中列表有個很重要的元素 — key，今天就來看看他到底是什麼重要角色。

改良一下之前的範例:

function List({ numbers }) {
	const listItems = numbers.map((number) =>
	  <li>{number}</li>
	);
  return <ul>{listItems}</ul>
};

const ListNumbers = [1, 2, 3, 4, 5];
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<List numbers={ListNumbers} />);

此時會出現沒有key的警示訊息，我們在li身上加個東西就可以解決

<li key={number.toString()}>{number}</li>

key如同一個id，是唯一且固定的身分，每個li必須有各自的id，如此一來在刪除、增加或更新時React才能找到對應的id去做事情。

有一個例外的情況，那就是同時有多個array，各array之間可以有重複的key值，遵守「**Key 必須在 Sibling 中是唯一的」**這個規則就沒錯啦!

有找到一個講解很清楚的文章，裡面使用顏色的範例以及表格範例說明利用index和content做key的差異，範例請參考此連結。

JSX 中嵌入 map()

補充另一種寫法，這可以讓畫面看起來更簡潔，我們可以依照自己習慣的方式去選擇怎麼撰寫。

function List({ numbers }) {
  return (
		<ul>
			{numbers.map((number) =>
			  <li key={number.toString()>{number}</li>
			)}
		</ul>
};